import { computed, Reactive } from "vue"
import { useFormContext } from "@/components/form/context"

export function useComputedBordered(props: Reactive<{ bordered: boolean }>) {
  const formContext = useFormContext()

  const computedBordered = computed(() => {
    if (props.bordered) {
      // 如果已经指定值，则按照指定值显示
      return props.bordered
    }

    if (formContext?.layout === "vertical") {
      // 表单是垂直布局的时候没有边框
      return true
    }

    // 默认有边框
    return false
  })

  return {
    computedBordered,
  }
}
